<template>
  <div>
    <h1>ElementUI 简单操作</h1>
    <el-switch v-model="value" active-color="#13ce66" inactive-color="#ff4949">
    </el-switch>

    <el-progress :percentage="50"></el-progress>
    <el-progress :percentage="100" :format="format"></el-progress>
    <el-progress :percentage="100" status="success"></el-progress>
    <el-progress :percentage="100" status="warning"></el-progress>
    <el-progress :percentage="50" status="exception"></el-progress>
    <hr />
    <h1 align="center">用户页面展现</h1>

    <!-- 1.面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>葫芦娃</el-breadcrumb-item>
      <el-breadcrumb-item>爷爷</el-breadcrumb-item>
      <el-breadcrumb-item>蛇精</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 2.卡片设置 -->
    <el-card class="box-card">

      <!-- 4.栅格 将一行动态划分为24份  -->
      <el-row :gutter="15">
        <el-col :span="8">
          <!-- 3文本输入框  -->
          <el-input placeholder="请输入内容" v-model="input3" class="input-with-select">
            <el-button slot="append" icon="el-icon-search"></el-button>
          </el-input>
        </el-col>
        <el-col :span="8">
          <el-button type="primary">新增</el-button>
        </el-col>
      </el-row>

      <!-- 准备表格数据 -->
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="date" label="日期111">
        </el-table-column>
        <el-table-column prop="name" label="姓名222">
        </el-table-column>
        <el-table-column prop="address" label="地址333">
        </el-table-column>
        <el-table-column label="操作" width="150px">
          <el-button type="primary" icon="el-icon-edit" circle @click="addUser"></el-button>
          <el-button type="danger" icon="el-icon-delete" circle></el-button>
        </el-table-column>
      </el-table>


    </el-card>




  </div>
</template>

<script>
  export default {
    data() {
      return {
        value: true,
        tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }]
      }
    },
    methods: {
      addUser() {
        alert("点击事件!!!!!")
      }
    }
  }
</script>

<!-- 防止样式重叠 -->
<style lang="less" scoped>

</style>
